<template>
  <div class="box">
    <div class="course-top">
      <div class="top-left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>布置作业</el-breadcrumb-item>
          <el-breadcrumb-item>检查作业</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div @click="back()" class="top-right">返回</div>
    </div>
    <div class="container" :element-loading-text="text">
      <!-- v-loading="isloading" -->
      <div v-show="isShow" class="Card">
        <div class="card">
          <!-- <el-card class="card1" style="height: 60%">



          <Calendar
            :futureDayHide="(new Date().getTime() + '').substring(0, 10)"
            class="canlendar"
            v-on:choseDay="clickDay"
            :markDate="[value1]"
            v-on:changeMonth="changeDate"
            v-on:isToday="clickToday"
          ></Calendar>
        </el-card> -->
          <el-card class="card1">
            <div style="font-weight: 400; color: #333333; font-size: 24px">
              当日班级作业完成率
            </div>
            <div style="display: flex; padding-top: 10%">
              <div
                ref="monthWorkOrder"
                class="echarts-box"
                style="width: 100%; height: 200%"
              ></div>
              <div
                ref="monthWorkOrders"
                class="echarts-box"
                style="width: 100%; height: 200%"
              ></div>
            </div>
            <div style="display: flex; justify-content: space-around">
              <div style="font-size: 24px; font-weight: 400; color: #333333">
                作业完成率
              </div>
              <div style="font-size: 24px; font-weight: 400; color: #333333">
                作业优良率
              </div>
            </div>
          </el-card>
          <el-card class="card2">
            <div style="font-weight: normal; color: #9a9a9a">
              完成趋势(本周)
            </div>
            <div
              ref="monthWorkOrderss"
              class="echarts-box"
              style="width: 100%; height: 300%"
            ></div>
          </el-card>
        </div>
        <div class="card3" style="margin-top: 1%">
          <el-card class="card4">
            <div class="handler">
              <div
                style="
                  font-weight: 400;
                  color: #333333;
                  font-size: 24px;
                  margin-bottom: 10px;
                "
              >
                当日学生作业完成情况
              </div>

              <!-- <div>
                <el-select
                  v-model="model.classId"
                  @change="gettaskResultStatistics"
                  placeholder=""
                  style="width: 200px; margin-right: 10px"
                >
                  <el-option
                    v-for="item in classList"
                    :value="item.pscId"
                    :key="item.pscId"
                    :label="item.scName + item.pscName"
                    v-loading="fullscreenLoading"
                  ></el-option>
                </el-select>
                <el-date-picker
                  v-model="value1"
                  @change="clickDay"
                  type="date"
                  placeholder="选择日期"
                  style="width: 200px"
                >
                </el-date-picker>
              </div> -->
            </div>
            <el-table
              :data="data"
              height="620"
              empty-text="当天暂无学生完成作业"
              :header-cell-style="{
                background: 'rgba(61,157,255,0.05)',
                color: '#333333',
              }"
              style="width: 100%"
              :row-class-name="xxxTableRowClassName"
            >
              <el-table-column
                style="height: 100px"
                prop="stuname"
                align="center"
                label="学生姓名"
              >
                <template slot-scope="scope">
                  <div
                    style="
                      height: 50px;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <el-badge
                      style="display: flex; align-items: center"
                      v-if="scope.row.isAccomplish > 0"
                      :value="'待审核'"
                      class="item"
                    >
                      <div style="padding: 5px">{{ scope.row.stuname }}</div>
                    </el-badge>
                    <div v-else>
                      {{ scope.row.stuname }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="stustudentid" align="center" label="学号">
            </el-table-column> -->
              <el-table-column align="center" label="当日作业情况" width="550">
                <template slot-scope="scope">
                  <div class="table">
                    <span
                      style="height: 40px; width: 220px; display: inline-block"
                      :ref="'echarts' + scope.row.stuid"
                    >
                    </span>

                    <span
                      style="height: 40px; width: 220px; display: inline-block"
                      :ref="'echarts1' + scope.row.stuid"
                    >
                    </span>

                    <span
                      style="
                        white-space: nowrap;
                        margin-right: 30px;
                        cursor: pointer;
                      "
                    >
                      老师点赞
                      <template v-if="scope.row.honor == 1">
                        <svg
                          style="transform: translateY(2px)"
                          t="1656833940827"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="815"
                          width="20"
                          height="20"
                          @click="somebody(scope.row.stuid, scope.row)"
                        >
                          <path
                            d="M32 407.584a279.584 279.584 0 0 1 480-194.944 279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512L562.592 892.8a96 96 0 0 1-124.416-1.952l-308.16-270.688A278.976 278.976 0 0 1 32 407.584z"
                            fill="#d81e06"
                            p-id="816"
                          ></path>
                        </svg>
                      </template>
                      <template v-if="scope.row.honor == 0">
                        <svg
                          style="transform: translateY(2px)"
                          t="1668671175471"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          @click="somebody(scope.row.stuid, scope.row)"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="2920"
                          width="20"
                          height="20"
                        >
                          <path
                            d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z"
                            p-id="2921"
                          ></path>
                        </svg>
                      </template>
                    </span>

                    <span>
                      <el-button
                        size="small"
                        plain
                        type="primary"
                        @click="hanlder(scope.row)"
                        >详情</el-button
                      >
                    </span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Calendar from "vue-calendar-component";
import { classSimList, classlike } from "@/api/conmmon";
import { taskResultStatistics } from "@/api/sports/examine";
import particulars from "./component/particulars";
import theme from "@/utils/customed.json";
import * as echarts from "echarts";
import moment from "moment";
export default {
  name: "",
  components: {
    particulars,
    Calendar,
  },
  props: {},
  data() {
    return {
      fullscreenLoading: false,
      value1: moment(new Date()).format("YYYY-MM-DD"),
      classModel: {
        pageSize: 1000000,
        pageNum: 1,
      },
      isShow: true,
      isloading: true,
      data: [],
      classList: [],
      model: {
        pageSize: 99999,
        pageNum: 1,
        classId: null,
      },
      text: "暂无班级",
      echartsLineX: [],
      echartsLineY: [],
      classchomework: null,
      classwhomework: null,
      stuInfo: {
        allhomeworkshow: {},
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    // this.getClassList();
    this.gettaskResultStatistics();
  },
  mounted() {},
  methods: {
    back() {
      this.$router.back();
    },
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    // clickDay(data) {
    //   this.text = "加载中";
    //   this.fullscreenLoading = true;
    //   this.value1 = moment(data).format("YYYY-MM-DD");

    //   this.gettaskResultStatistics();
    //   this.fullscreenLoading = false;
    // },
    // changeDate(data) {
    //   data = moment(data).format("YYYY-MM-DD");
    // },
    // clickToday(data) {
    //   data = moment(data).format("YYYY-MM-DD");
    // },
    gettaskResultStatistics() {
      this.isloading = true;
      // if (sessionStorage.getItem("value1")) {
      //   this.value1 = JSON.parse(sessionStorage.getItem("value1"));
      //   this.clickToday(this.value1);
      //   sessionStorage.removeItem("value1");
      // } else {
      //   this.value1 = this.value1;
      // }
      let data = {
        stupscid: this.$route.query.classId,
        pjtime: this.$route.query.todayTime,
        pageNum: 1,
        pageSize: 999,
      };
      console.log(data);
      taskResultStatistics(data).then((res) => {
        if (res.code === 200) {
          this.data = res.result.stulist;
          this.echartsLineX = res.result.weeklist.map((item) => item.pjtime);
          this.echartsLineY = res.result.weeklist.map((item) => item.chomework);
          this.classchomework = res.result.classchomework;
          this.classwhomework = res.result.classwhomework;
          this.initMonthWorkOrder();
          this.initMonthWorkOrders();
          this.initMonthWorkOrderss();
          this.init();
          this.init1();
          this.isloading = false;
        }
      });
    },
    // getClassList() {
    //   this.isloading = true;
    //   let data = {
    //     userId: this.$store.state.user.USER_INFO.id,
    //     pscShId: this.$store.state.user.USER_INFO.pscShId,
    //   };
    //   classSimList(data).then((response) => {
    //     if (response.code === 200) {
    //       this.classList = response.result;
    //       if (response.result.length) {
    //         if (sessionStorage.getItem("classId")) {
    //           this.model.classId = JSON.parse(
    //             sessionStorage.getItem("classId")
    //           );
    //           sessionStorage.removeItem("classId");
    //         } else {
    //           this.model.classId = response.result[0].pscId;
    //         }

    //         this.gettaskResultStatistics();
    //       }
    //       if (response.result.length) {
    //         this.isloading = false;
    //       } else {
    //         this.echartsLineX = [0, 0, 0, 0, 0, 0, 0];
    //         this.echartsLineY = [0, 0, 0, 0, 0, 0, 0];
    //         this.classchomework = 0;
    //         this.classwhomework = 1;
    //         this.initMonthWorkOrder();
    //         this.initMonthWorkOrders();
    //         this.initMonthWorkOrderss();
    //         this.init();
    //         this.init1();
    //       }
    //     }
    //   });
    // },
    hanlder(row) {
      sessionStorage.setItem(
        "value1",
        JSON.stringify(this.$route.query.todayTime)
      );
      sessionStorage.setItem(
        "classId",
        JSON.stringify(this.$route.query.classId)
      );
      this.$router.push({
        path: "/particulars",
        query: {
          row: JSON.stringify(row),
          time: this.$route.query.todayTime,
        },
      });
    },
    init() {
      this.getEcharts();
    },
    init1() {
      this.getEcharts1();
    },
    getEcharts() {
      this.$nextTick(() => {
        this.data.forEach((e) => {
          let myChart = echarts.init(this.$refs["echarts" + e.stuid]);
          myChart.setOption({
            color: ["#26D0FF", "#DFE4EA "],
            title: [
              {
                subtext: "作业优良率",
                left: 0,
                subStyle: {
                  fontSize: 10,
                  color: "#1C1F37",
                },
                top: 0,
              },
              {
                top: 8,
                left: "center",
                text: isNaN(
                  ((e.chomework /  e.whomework) * 100).toFixed(0)
                )
                  ? 0 + "%"
                  : ((e.chomework / e.whomework) * 100).toFixed(
                      0
                    ) + "%",
                textStyle: {
                  fontSize: 14,
                  color: "#1C1F37",
                },
              },
            ],
            tooltip: {
              trigger: "item",
            },
            series: [
              {
                type: "pie",
                radius: ["84%", "100%"],
                label: {
                  show: false,
                  formatter: "{d}%",
                },
                visualMap: {
                  show: false,
                },
                silent: true,
                data: [{ value: e.chomework }, { value: (e.whomework - e.chomework) }],
              },
            ],
          });
        });
      });
    },
    getEcharts1() {
      this.$nextTick(() => {
        this.data.forEach((e) => {
          let myChart = echarts.init(this.$refs["echarts1" + e.stuid]);
          myChart.setOption({
            color: ["#1890FF", "#DFE4EA "],
            title: [
              {
                subtext: "作业完成率",
                left: 0,
                subStyle: {
                  fontSize: 10,
                  color: "#1C1F37",
                },
                top: 0,
              },
              {
                top: 8,
                left: "center",
                text: isNaN(
                  ((e.chomework /  e.whomework) * 100).toFixed(0)
                )
                  ? "0%"
                  : ((e.chomework / e.whomework) * 100).toFixed(
                      0
                    ) + "%",
                textStyle: {
                  fontSize: 14,
                  color: "#1C1F37",
                },
              },
            ],
            tooltip: {
              trigger: "item",
            },
            series: [
              {
                type: "pie",
                radius: ["84%", "100%"],
                label: {
                  show: false,
                  formatter: "{d}%",
                },
                visualMap: {
                  show: false,
                },
                silent: true,

                data: [{ value: e.chomework }, { value: (e.whomework - e.chomework) }],
              },
            ],
          });
        });
      });
    },
    //  点赞的状态
    somebody(id, status) {
      let data = {
        pjStuId: id,
        // pjIsHonor:status.honor,
        pjIsHonor: status.honor == 1 ? "0" : "1",
        pjTodayTime: this.value1,
      };
      classlike(data).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.gettaskResultStatistics();
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
        }
      });
    },
    initMonthWorkOrder() {
      echarts.registerTheme("theme", theme);
      let myChart = echarts.init(this.$refs.monthWorkOrder, "theme");
      let options = {
        title: [
          {
            text: isNaN(
              (
                (this.classchomework /
                  (this.classchomework + this.classwhomework)) *
                100
              ).toFixed(1)
            )
              ? "0%"
              : (
                  (this.classchomework /
                    (this.classchomework + this.classwhomework)) *
                  100
                ).toFixed(1) + "%",
            left: "center",
            top: 86,
            textStyle: {
              fontSize: 30,
              color: "#1890FF",
            },
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["60%", "90%"],
            label: {
              show: false,
              formatter: "{d}%",
            },
            visualMap: {
              show: false,
            },
            silent: true,
            data: [
              { value: this.classchomework, name: "已完成" },
              { value: this.classwhomework, name: "未完成" },
            ],
          },
        ],
      };
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.setOption(options);
    },
    initMonthWorkOrders() {
      echarts.registerTheme("theme", theme);
      let myChart = echarts.init(this.$refs.monthWorkOrders, "theme");
      let options = {
        title: {
          text: isNaN(
            (
              (this.classchomework /
                (this.classchomework + this.classwhomework)) *
              100
            ).toFixed(1)
          )
            ? "0%"
            : (
                (this.classchomework /
                  (this.classchomework + this.classwhomework)) *
                100
              ).toFixed(1) + "%",
          left: "center",
          top: 86,
          textStyle: {
            fontSize: 30,
            color: "#1890FF",
          },
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "90%"],
            label: {
              show: false,
              formatter: "{d}%",
            },
            visualMap: {
              show: false,
            },
            silent: true,

            data: [
              { value: this.classchomework, name: "已完成" },
              { value: this.classwhomework, name: "未完成" },
            ],
          },
        ],
      };
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.setOption(options);
    },
    initMonthWorkOrderss() {
      echarts.registerTheme("theme", theme);
      let myChart = echarts.init(this.$refs.monthWorkOrderss, "theme");
      let options = {
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          data: this.echartsLineX,
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: this.echartsLineY,
            type: "line",
            // symbol: "circle",
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 1,
              },
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#538FFF", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#fff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
        grid: {
          top: 30,
          right: 30,
          left: 30,
          bottom: 30,
        },
      };
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.setOption(options);
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  padding: 2vh 15vw;
}
.course-top {
  display: flex;
  justify-content: space-between;
  padding: 1vh 0;
  ::v-deep .el-breadcrumb__inner {
    font-size: 1vw;
  }
  .top-right {
    font-size: 1vw;
    color: #1677ff;
  }
}
.container {
  height: 84vh;
  max-height: 84vh;
  overflow-y: auto;
}
>>> .el-badge__content .is-fixed {
  right: 5px;
}
.handler {
  display: flex;
  justify-content: space-between;
}
.Card {
  display: flex;
  margin-top: -1.5%;
  .card {
    margin-top: 1%;
    display: flex;
    flex-direction: column;
    width: 35%;
    .card1 {
      height: 50%;
    }
    .card2 {
      margin-top: 1%;
      height: 50%;
    }
  }
  .card3 {
    width: 65%;
    margin: 0 0.5%;
    .card4 {
      height: 100%;
    }
  }
}
::v-deep .el-table__row.statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
::v-deep .wh_container {
  max-width: 100% !important;
  margin: auto !important;
}
::v-deep .wh_content_all {
  background-color: #fff !important;
}
::v-deep .wh_top_changge li {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #363636 !important;
}
::v-deep .wh_content_item .wh_chose_day {
  background: #1890ff !important;
  color: #fff !important;
}
::v-deep .wh_jiantou2 {
  width: 12px !important;
  height: 12px !important;
  border-top: 2px solid #525252 !important;
  border-right: 2px solid #525252 !important;
  transform: rotate(45deg) !important;
}
::v-deep .wh_jiantou1 {
  width: 12px !important;
  height: 12px !important;
  border-top: 2px solid #525252 !important;
  border-left: 2px solid #525252 !important;
  transform: rotate(-45deg) !important;
}
::v-deep .wh_content_item {
  color: #525252 !important;
}
::v-deep .wh_content_item .wh_isToday {
  color: #fff !important;
  background: #f84c0a !important;
}
::v-deep .wh_content_item .wh_chose_day {
  background: #f84c0a !important;
}
::v-deep .wh_content_item > .wh_isMark {
  color: #fff !important;
  background: #1890ff !important;
}
::v-deep .wh_item_date:hover {
  background: #1890ff !important;
  color: #ffffff !important;
  border-radius: 50% !important;
}
::v-deep .el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 20px;
} //表头
::v-deep .el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 10px;
} ///各行
// 滚动条大小设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /*纵向滚动条*/
  width: 5px;
  /*横向滚动条*/
  height: 5px;
}

// 滚动条滑块样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

// 滚动条背景样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background: none;
}

// 表格横向和纵向滚动条对顶角样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
  background-color: #111;
}

// 去除滚动条上方多余显示
::v-deep .el-table__header .has-gutter th.gutter {
  display: none !important;
}
// Firefox滚动条样式设置
::v-deep .el-table__body-wrapper {
  overflow-y: scroll !important;
  scrollbar-color: #bebebf transparent !important;
  scrollbar-width: thin !important;
}
.wh_container {
  height: 331px;
}
// .card {
//   display: flex;
//   .card1 {
//     width: 39%;
//     margin-right: 1%;
//   }
//   .card2 {
//     width: 60%;
//   }
// }
.icon {
  padding-top: 5px;
}
::v-deep .el-table__row.statistics-warning-row {
  background: #f5f7fa !important;
}
::v-deep .el-calendar-table .el-calendar-day {
  width: 70px;
  height: 40px;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 2220px;
}
.table {
  display: flex;
  align-items: center;
}

.flex {
  flex: 1;
}
</style>
